/**
 * 小数点后面保留几位
 *
 * @param x 做近似数处理的数
 * @param n 小数点后第几位
 * @returns 近似后的数
 */
function roundF(x,n){
  return Math.round(x * Math.pow(10,n)) / Math.pow(10,n);
};

$(()=>{
  //get dom elem
  var $width = $('#width'),
      $height = $('#height'),
      $calc = $('#calc'),
      $perimeter = $('#perimeter'),
      $area = $('#area');
  //button
  $calc.click(()=>{
    //检验
    if(!validate('#width') || !validate('#height')) return;
    //检验出错就返回

    //get value
    var w = Number($width.val()),
         h = Number($height.val());
    //计算
    var p = 2 * (w + h),
        a = w * h;

    $perimeter.val(roundF(p,1));
    $area.val(roundF(a,2));
    
  });
  function validate(field) {
    //获得错误信息
    var $data = $(field),
        $msg = $(field + '-validation');
    console.log($data)
    //validate null
    if($data.val()===''){
      if($data.selector === '#width'){
        $msg.html('宽度不能为空！')
        $data.select();//select就是设置焦点
        return false;
      }
      else{
        $msg.html('高度不能为空！')
        $data.select();
        return false;
      }
      return false;
    }
    //validate number
    if(!/^-?(0|[1-9]\d*)(\.\d*)?([eE][+-]?\d+)?$/.test($data.val())){
      $msg.html('必须是数值！');
      $data.select();//select就是设置焦点
      return false;
    } 
    //validate > 0
    if(Number($data.val()) <= 0){
      $msg.html('必须大于零！');
      $data.select();//select就是设置焦点
      return false;
    }
    $msg.html('');
    return true;
    //不满足返回错误
    //满足返回true
  }
})
